<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public/reset.css">
    <style>
        #login-head{
            width: 100%;
            border-bottom: 4px solid rgb(226,5,27);
        }
        .login-head-top{
            width: 100%;
            background-color: #f4f4f4;
        }
        .login-head-top>p{
            width: 1200px;
            margin: 0 auto;
            color: #868686;
            font-size: 12px;
            padding-bottom: 3px;
        }
        .login-head-bottom{
            width: 1200px;
            margin: 25px auto 0;
            display: flex;
            justify-content: space-between;
            padding: 0px 0px 20px 0px;
        }
        .login-head-bottom>div:nth-child(2) img{
            float: left;
            width: 85px;
            height: 85px;
            margin-right: 3px;
        }
        .login-head-bottom>div:nth-child(2) p{
            overflow: hidden;
            white-space: nowrap;
            font:400 16px/16px "微软雅黑";
            line-height: 1.8em;
            color: #666;
        }
        #test{width: 100%;height: 470px;}

        * {
  margin: 0;
  padding: 0;
}

#loginInterfaceBox {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

#loginInterface {
  float: right;
  margin-top: 30px;
  background-color: white;
  width: 350px;
  padding-bottom: 20px;
}
#loginInterface .loginbox {
  box-sizing: border-box;
  padding: 20px 20px;
  text-align: center;
  font-size: 16px;
}
#loginInterface .loginbox .logintype {
  display: flex;
  width: 85%;
  margin: 0 auto;
  justify-content: space-between;
  margin-bottom: 20px;
}
#loginInterface .loginbox .logintype div:nth-child(2) {
  border-right: 1px solid #ddd;
}
#loginInterface .loginbox .logintype:hover {
  cursor: pointer;
}
#loginInterface .loginbox .inlogin {
  width: 90%;
  height: 36px;
  box-sizing: border-box;
  margin: 0 auto 10px;
  border: 1px solid #bbb;
}
#loginInterface .loginbox .inlogin i {
  width: 36px;
  height: 36px;
  border-right: 1px solid #bbb;
  background-color: red;
}
#loginInterface .loginbox .inlogin input {
  outline-style: none;
  border: 0px;
  height: 100%;
}
#loginInterface .loginbox .loginaccount {
  width: 100%;
  height: 35px;
  background-color: #df0045;
  line-height: 35px;
  font-size: 20px;
  color: white;
}
#loginInterface .loginbox .loginaccount:hover {
  cursor: pointer;
  background-color: #c03;
}
#loginInterface .loginbox .loginops {
  width: 90%;
  height: 48px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 48px;
}
#loginInterface .loginbox .loginops label {
  float: left;
  display: flex;
  align-items: center;
}
#loginInterface .loginbox .loginops .resetpassword {
  float: right;
  color: #df0045;
}
#loginInterface .another {
  text-align: center;
  border-top: 1px solid #bbb;
  font-size: 13px;
}
#loginInterface .another p:nth-child(1) {
  font-size: 18px;
  color: #df0045;
  padding: 5px;
}



    </style>
    <script src="./JSlibrary/icon/footer/iconfont.js"></script>
    <script src="./public/JQuery/jquery.3.5.0.js"></script>
    <!-- <link rel="stylesheet" href="./css/login.css"> -->
</head>
<body>
    <div id="login-head">
        <div class="login-head-top">
        <p>欢迎来到得力办公商城</p>
        </div>
        <div class="login-head-bottom">
        <div>
            <img src="./images/login/logo.jpg" alt="">
        </div>
        <div>
            <img src="./images/index/head/QRcode.jpg" alt="">
            <p>扫一扫！关注得力办公商城</p>
            <p>售前热线：400-168-0888</p>
            <p>售后热线：400-185-0555</p>
        </div>
        </div>
    </div>
    <div id="test">
        <div id="loginInterfaceBox">
            <div id="loginInterface">
                <div class="loginbox">
                <div class="logintype">
                <div>账号密码登录</div>
                <div></div>
                <div><a href="./register.html">立即注册</a></div>
                </div>
                <div class="inlogin">
                    <span>用户：</span><input type="text" id="login_id">
                </div>
                <div class="inlogin">
                    <span>密码：</span><input type="text" id="password">
                </div>
                <div class="loginops">
                <label for="remberuser">
                        <input type="checkbox" name="userlogin" id="remberuser"><span>记住用户名</span>
                    </label>
                <label for="autologin">
                        <input type="checkbox" name="userlogin" id="autologin"><span>自动登录</span>
                    </label>
                <span class="resetpassword">忘记密码?</span>
                </div>
                <div class="loginaccount" id="submit">登录</div>
                </div>
                <div class="another">
                    <p>-公告-</p>
                    <p>本站目前只支持签约客户登录</p>
                    <p>如需合作，请联系在线客服</p>
                </div>
            </div>
        </div>

    </div>
    <div id="footer"></div>
</body>
<script>
    window.onload=function(){
        $.ajax({
            url:"http://localhost:3000/database/login.json",
            dataType:"json",
            success:function(res){
              $("#test").css({background:`url(${res.msg[0].src})`})}
        })
    }
</script>
<script src="./JSlibrary/login.js"></script>
<script>$("#footer").load("http://localhost:3000/public/public.html .footer")</script>
</html>